上一回我們的Instagram已經完結了，下一個專案是模仿一個X(原推特)，在上一個專案有許多的遺憾，由於沒有後端，因此只能顯示固定的內容。這一次的X專案是前端加上後端的全端專案，能夠透過前端與後端之間的溝通顯示來自資料庫的內容，不再是前端預設好的內容，更加貼近現實世界的網站。

接下來介紹使用到的技術：

• React、Tailwindcss：我們的老朋友，上一個專案也有使用到。
• Next.js：適合大型專案的框架，React官方教學使用這個取代原本的Create-react-app。只要放在指定的資料夾（舊架構是pages新架構則是app）底下就能自動產生路由，在上一個專案需要設定路由，像是這樣：

<Route path="/" element={<HomePage />} />

Next.js無需設定就能完成這個配置。

• Prisma：它可以幫助開發者以快速、安全的方式從資料庫讀取資料，不需要從零開始寫SQL程式碼。
• MongoDB：是一種NoSQL資料庫，和傳統的資料庫不同，使用JSON來儲存資料，擁有高效能和方便擴展資料庫的特性。

接下來，我們先創建Next.js的專案，在cmd輸入：

npx create-next-app x-clone

按照以下選擇，有藍色以及底線的是我們選擇的選項，舉例來說：TypeScript我們選的是Yes。

完成後輸入

cd x-clone
npm i
npm run dev

打開瀏覽器，輸入http://localhost:3000/ ，看到以下畫面，代表專案成功建立了。